<!--
 * @Author: g05047
 * @Date: 2021-09-08 09:48:41
 * @LastEditors: g05047
 * @LastEditTime: 2021-09-08 11:22:36
 * @Description:食安课堂
-->
<template>
  <div class="classroom">
    <el-row type="flex" :gutter="20" align="middle">
      <el-col :span="8">
        <el-input
          clearable
                maxlength="50"
          v-model="query.safetyTitle"
          placeholder="食安标题"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="query.safetyCategory"
          clearable
          placeholder="食安分类"
        >
          <el-option
            :label="item"
            :value="item"
            v-for="(item, index) in list"
            :key="index"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="query.safetyState"  placeholder="状态">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="待发布" value="0"></el-option>
          <el-option label="已发布" value="1"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-checkbox v-model="query.isrecommend" true-label="1" false-label="0">是否推荐</el-checkbox>
      </el-col>
      <el-col :span="3">
        <el-button
          type="primary"
          @click="findFoodSafetyClassList"
          icon="el-icon-search"
          >查询</el-button
        ></el-col
      >
      <el-col :span="2">
        <el-button type="success" icon="el-icon-plus" @click="addItem"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="safetyTitle" label="食安标题"> </el-table-column>
      <el-table-column prop="safetyCategory" label="食安分类">
      </el-table-column>
      <el-table-column prop="isrecommend" label="是否推荐"> </el-table-column>
      <el-table-column prop="safetyState" label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.safetyState == '待发布'" class="red">待发布</div>
          <div v-else class="green">已发布</div>
        </template>
      </el-table-column>
      <el-table-column prop="releaseDate" label="发布时间">
        <template slot-scope="scope">
          <div>
            {{ scope.row.releaseDate || "--" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="playbackVolume" label="播放量"> </el-table-column>
      <el-table-column prop="" label="操作" width="220">
        <template slot-scope="scope">
          <el-button type="info" size="mini" @click="view(scope.row)"
            >查看</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.safetyState != '已发布'"
            @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            @click="deleteById(scope.row)"
            size="mini"
            v-if="scope.row.safetyState != '已发布'"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- <table-page :columns="columns" :tableData="tableData">
      <template slot="select">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="10">
            <el-input
              clearable
              v-model="query.safetyTitle"
              placeholder="食安标题"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="query.safetyCategory"
              clearable
              placeholder="食安分类"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in list"
                :key="index"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="query.safetyState" clearable placeholder="状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="待发布" value="0"></el-option>
              <el-option label="已发布" value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-checkbox v-model="query.isrecommendcheck">是否推荐</el-checkbox>
          </el-col>
          <el-col :span="3">
            <el-button
              type="primary"
              @click="findFoodSafetyClassList"
              icon="el-icon-search"
              >查询</el-button
            ></el-col
          >
          <el-col :span="4">
            <el-button type="success" icon="el-icon-plus" @click="addItem"
              >新增</el-button
            >
          </el-col>
        </el-row>
      </template>
      <template slot="safetyState" slot-scope="slotProps">
        <div v-if="slotProps.scope&&slotProps.scope.safetyState == '待发布'" class="red">
          待发布
        </div>
        <div v-else class="green">已发布</div>
      </template>
      <template slot="releaseDate" slot-scope="slotProps">
        <div>
          {{ slotProps.scope&&slotProps.scope.releaseDate || "--" }}
        </div>
      </template>

  <template slot="actions" slot-scope="slotProps">
        <div>
          {{ slotProps.scope}}
        </div>
      </template>
    



      <template slot="action" slot-scope="slotProps">
        <el-button type="info" size="mini">查看</el-button>
        <el-button type="primary" size="mini">编辑</el-button>
        <el-button type="danger" @click="deleteById(slotProps)" size="mini"
          >删除{{slotProps}}</el-button
        >
      </template> 
    </table-page> -->
    <pagination
      :total="total"
      :page.sync="query.page"
      @pagination="findFoodSafetyClassList"
      v-show="total"
    />
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      query: {
        isPage: 0,
        isrecommend: "1",
        page: 1,
        pageSize: 10,
        safetyCategory: "",
        safetyState: "-1",
        safetyTitle: "",
        creaeUnitId: "23342113",
        creaeUnitName: "苏州市市场监督管理局",
      },
      total: 0,
      list: [],
      tableData: [],
    };
  },
  computed: {},
  created() {
    this.findSafetyCategory();
    this.findFoodSafetyClassList();
  },
  mounted() {},
  methods: {
    addItem() {
      this.$router.push({ name: "addVideo" });
    },
    findFoodSafetyClassList() {
      this.$http
        .findFoodSafetyClassList(this.query)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
            this.total = res.totalCount;
          } else {
            this.$error(e.msg);
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
    findSafetyCategory() {
      this.$http
        .findSafetyCategory({
          params: this.query,
        })
        .then((res) => {
          if (res.code == 200) {
            this.list = res.data;
          } else {
            this.$error();
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
    deleteById(e) {
      this.$confirm("确定删除这一项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((red) => {
          this.$http
            .deleteById({
              params: {
                id: e.id,
              },
            })
            .then((res) => {
              if (res.code == 200) {
                this.findFoodSafetyClassList();
                this.$success(res.msg);
              } else {
                this.$error(res.msg);
              }
            })
            .catch((res) => {
              console.log(res);
            });
        })
        .catch((res) => {
          console.log(res);
        });
    },
    edit(e) {
      sessionStorage.setItem("classroom", JSON.stringify(e));
      this.$router.push("/foodSafety/classroom/addVideo");
    },
    view(e) {
      sessionStorage.setItem("classroom", JSON.stringify(e));
      this.$router.push("/foodSafety/classroom/viewVideo");
    },
    pagination(e) {
      console.log(e);
    },
  },
};
</script>

<style scoped lang="scss">
.classroom {
  padding: 20px;
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>
